<template>
  <div class="container" style="margin-top: 30px; padding: 20px">
    <div class="row">
      <!-- <div class="col-md-3 col-xs-3 offset-md-1 card">丰硕品牌</div>
        <div class="col-md-3 col-xs-3 offset-md-1 card">丰硕资讯</div>
        <div class="col-md-3 col-xs-3 offset-md-1 card">媒体聚焦</div> -->
      <div class="tools col-xl-3 col-xs-12">
        <div>
          <div class="title-div">
            <a
              href="/custom/1?id=1&page=1&pagsize=10"
              title="丰烁品牌"
              target="_self"
              class="more"
              >更多</a
            >
            <div class="title"><em>丰烁品牌</em><span></span></div>
          </div>
          <div class="container justify-content-center">
            <div
              style="width: 100%; text-align: center"
              class="row row-cols-4 justify-content-between"
            >
              <a
                href="/custom/3?id=6&page=1&pagsize=10"
                title="水吧"
                target="_blank"
                class="col-xl-6 col-md-3 col-6 col-xs-6"
              >
                <div>
                  <div class="translate">
                    <img
                      class="load"
                      src="http://www.gdmn88.com/upload/202006/1593090260.png"
                      width="80"
                      height="80"
                      style="display: block"
                    />
                    <em>水吧</em>
                  </div>
                </div>
              </a>
              <a
                href="/custom/3?id=6&page=1&pagsize=10"
                title="面馆"
                target="_blank"
                class="col-xl-6 col-md-3 col-6 col-xs-6"
              >
                <div>
                  <div class="translate">
                    <img
                      class="load"
                      src="http://www.gdmn88.com/upload/202006/1593090291.png"
                      width="80"
                      height="80"
                      style="display: block"
                    />
                    <em>面馆</em>
                  </div>
                </div>
              </a>
              <a
                href="/custom/3?id=6&page=1&pagsize=10"
                title="娱乐室"
                target="_blank"
                class="col-xl-6 col-md-3 col-6 col-xs-6"
              >
                <div>
                  <div class="translate">
                    <img
                      class="load"
                      src="http://www.gdmn88.com/upload/202006/1593089880.png"
                      width="80"
                      height="80"
                      style="display: block"
                    />
                    <em>娱乐室</em>
                  </div>
                </div>
              </a>
              <a
                href="/custom/3?id=6&page=1&pagsize=10  "
                title="便利店"
                target="_blank"
                class="col-xl-6 col-md-3 col-6 col-xs-6"
              >
                <div>
                  <div class="translate">
                    <img
                      class="load"
                      src="http://www.gdmn88.com/upload/202006/1593089749.png"
                      width="80"
                      height="80"
                      style="display: block"
                    />
                    <em>便利店</em>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="noticeBase col-xl-9 col-xs-12">
        <div class="row">
          <div class="notice notice02 col-lg-6">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              <a
                href="/custom/2?id=1&page=1&pagsize=10"
                title="丰烁资讯"
                target="_self"
                class="more"
                >更多</a
              >
              <div class="title"><em>丰烁资讯</em><span></span></div>
              <div class="text-ellipsisl1 clearfix">
                <div class="smallimg" style="float: left; width: 120px">
                  <img style="width: 100%" :src="detail.new1[0].cover" />
                </div>
                <span> {{ detail.new1[0].CreateDate | formatDate }} </span>
                <br />
                <a
                  :href="`/detail/2/${detail.new1[0].id}?id=1`"
                  :title="detail.new1[0].title"
                  target="_blank"
                >
                  <span>
                    {{ detail.new1[0].title }}
                  </span>
                </a>
              </div>
              <ul class="ulstyle">
                <li v-for="item in detail.new1.slice(1)" :key="item">
                  <span> {{ item.CreateDate | formatDate }}</span>

                  <a
                    :href="`/detail/2/${item.id}?id=1`"
                    :title="item.title"
                    target="_blank"
                  >
                    <span class="text-ellipsisl1" style="">{{
                      item.title
                    }}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="notice notice02 col-lg-6">
            <div>
              <a
                href="/custom/2?id=2&page=1&pagsize=10"
                title="媒体聚焦"
                target="_self"
                class="more"
                >更多</a
              >
              <div class="title"><em>媒体聚焦</em><span></span></div>

              <div class="text-ellipsisl1 clearfix">
                <div class="smallimg" style="float: left; width: 120px">
                  <img style="width: 100%" :src="detail.new2[0].cover" />
                </div>
                <span> {{ detail.new2[0].CreateDate | formatDate }} </span>
                <br />
                <a
                  :href="`/detail/2/${detail.new2[0].id}?id=2`"
                  :title="detail.new2[0].title"
                  target="_blank"
                >
                  <span>
                    {{ detail.new2[0].title }}
                  </span>
                </a>
              </div>
              <ul class="ulstyle">
                <li v-for="item in detail.new2.slice(1)" :key="item">
                  <span> {{ item.CreateDate | formatDate }}</span>

                  <a
                    :href="`/detail/2/${item.id}?id=2`"
                    :title="item.title"
                    target="_blank"
                  >
                    <span class="text-ellipsisl1" style="">{{
                      item.title
                    }}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['detail'],
}
</script>

<style scoped>
.card {
  background-color: #f9f9f9;
  height: 300px;
}
.more {
  float: right;
  width: 96px;
  height: 34px;
  z-index: 100;
  line-height: 34px;
  text-align: center;
  color: #ffffff;
  background: #666666;
  background: #bda179;
}
.translate img {
  margin: 0 auto;
}
.title {
  margin-bottom: 50px;
}
.first {
  display: grid;
  grid-template-columns: 100px 1fr;
}
.ulstyle,
.first {
  width: 100%;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-ellipsisl1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ulstyle li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 10px;
}
</style>
